<template>
  <el-dialog
    v-if="dialogFormVisible"
    :title="title"
    :visible.sync="dialogFormVisible"
    width="500px"
    @close="close"
  >
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="角色名" prop="role_name">
        <el-input v-model="form.role_name" />
      </el-form-item>
      <el-form-item label="权限设置">
        <el-tree
          ref="menus"
          :data="menus"
          show-checkbox
          node-key="id"
          default-expand-all
          check-on-click-node
          :expand-on-click-node="false"
          icon-class="tree-noicon"
          :indent="22"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { doAdd, doEdit, getDetail, getRoleList, setRole } from '@/api/role'

  export default {
    name: 'RoleEdit',
    data() {
      return {
        form: {
          role_name: '',
          permission: {
            halfChecked: [],
            checked: [],
          },
        },
        checks: [],
        rules: {
          role_name: [
            { required: true, trigger: 'blur', message: '请输入名称' },
          ],
        },
        title: '',
        dialogFormVisible: false,
        type: null,
        menus: [],
        /*menus: [
          { id: 'Index', label: '首页' },
          {
            id: 'Event',
            label: '活动管理',
            children: [
              { id: 'Activity', label: '活动列表' },
              { id: 'ActivityArchive', label: '归档' },
              { id: 'Supplier', label: '供应商管理' },
              { id: 'SupplierCategory', label: '供应商分类管理' },
            ],
          },
          {
            id: 'Payment',
            label: '付款管理',
            children: [
              { id: 'PaymentPending', label: '付款申请' },
              { id: 'PaymentCheck', label: '付款审批' },
              { id: 'PaymentRequest', label: '付款查询' },
              { id: 'Payable', label: '应付查询' },
            ],
          },
          {
            id: 'Invoice',
            label: '开票管理',
            children: [
              { id: 'InvoicePending', label: '开票申请' },
              { id: 'InvoiceRequest', label: '开票查询' },
            ],
          },
          {
            id: 'Account',
            label: '账号管理',
            children: [
              { id: 'Manager', label: '账号列表' },
              { id: 'Role', label: '角色管理' },
            ],
          },
        ],*/
        id: '0',
      }
    },
    created() {},
    methods: {
      async showEdit(row) {
        if (!row) {
          this.title = '添加'
          this.type = 'add'
          this.checks = []
        } else {
          this.title = '编辑'
          this.type = 'edit'
          this.id = row.id
          const data = await getDetail({ role_id: row.id })
          data.permission = data.permission || '{"halfChecked":[],"checked":[]}'
          data.permission = JSON.parse(data.permission)
          this.form = Object.assign({}, data)
        }
        this.dialogFormVisible = true
        //获取权限列表
        getRoleList({ role_id: this.id }).then((res) => {
          this.menus = res.data
          this.checks = res.role_id
          this.$nextTick(() => {
            this.$refs.menus.setCheckedKeys(this.form.permission.checked)
          })
        })
      },
      close() {
        this.$refs['form'].resetFields()
        this.form = this.$options.data().form
        this.dialogFormVisible = false
      },
      save() {
        const { form, menus } = this.$refs
        form.validate(async (valid) => {
          if (valid) {
            let msg
            const checkedNames = {
              halfChecked: menus.getHalfCheckedKeys(),
              checked: menus.getCheckedKeys(),
            }
            this.form.permission = JSON.stringify(checkedNames)
            let arr = [
              ...this.$refs.menus.getCheckedKeys(),
              ...this.$refs.menus.getHalfCheckedKeys(),
            ]
            if (this.type === 'add') {
              let id = await doAdd(this.form)
              let params = {
                role_id: id,
                auth_id: arr.join(','),
              }
              msg = await setRole(params)
            } else {
              const data = { ...this.form, role_id: this.form.id }
              msg = await doEdit(data)
              let params = {
                role_id: this.form.id,
                auth_id: arr.join(','),
              }
              msg = await setRole(params)
            }
            this.$baseMessage(msg, 'success')
            this.$emit('fetch-data')
            this.close()
          } else {
            return false
          }
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  ::v-deep {
    .el-tree {
      position: relative;
      top: 3px;
    }

    .tree-noicon {
      padding: 0;
    }

    .el-tree-node__content:hover,
    .el-tree-node:focus > .el-tree-node__content {
      background-color: transparent;
    }
  }
</style>
